<template>
    <div class="contentDiv">
        <div class="filter">
            <filter-component
                @getTableData="getTableData"
                @getFilter="getFilter"
                :pageParams="dataMap.pageParams"
                getPageFilterUrl="/api/user/GetPageFilter"
                getPageDataUrl="/api/user/GetPageData"
                ref="filterRef"
            />
        </div>
        <div class="options">
            <el-row class="mb-4">
                <el-button type="success" size="small" @click="handleAddNew">新增</el-button>
                <el-button type="info" size="small" @click="handleDisable">禁用</el-button>
                <el-button type="primary" size="small" @click="handleEnable">启用</el-button>
                <el-button type="danger" size="small" @click="resetPassword">重置密码</el-button>
                <el-button type="warning" size="small">分配角色</el-button>
            </el-row>
        </div>
        <div class="dataList">
            <list-table 
            :filters="dataMap.filterArr" 
            :tableData="dataMap.tableData" 
            @getTotalSelections="getTotalSelections" 
            ref="dataListRef"
            />
        </div>
        <div class="footer">
            <div class="page">
                <pagination 
                :totalNum="dataMap.totalNum"
                @getPageParams="getPageParams"
                />
            </div>
            <div class="records">
                <span>
                    <el-button
                        key="warning"
                        type="warning"
                        text
                        >
                        当前选中：<span style="color:red;font-size:18px;font-weight: bolder;">{{dataMap.selections.length}}</span> &nbsp;&nbsp;条记录
                    </el-button>
                </span>
                <span>
                    <el-button
                        key="primary"
                        type="primary"
                        text
                        @click="clearSelections"
                        >
                        清空选择
                    </el-button>
                </span>
            </div>
        </div>
    </div>
    <dialog-form 
    :filters="dataMap.filterArr" 
    :vModel="dataMap.addNewVisible" 
    :currentFormData="dataMap.currentFormData"
    titleText="新增用户"
    closeDialogFunc="closeAddNewDialog"
    getDialogDataFunc="getAddNewDialogData"
    @closeAddNewDialog="closeAddNewDialog"
    @getAddNewDialogData="getAddNewDialogData"
    />
</template>


<script setup>
import { onMounted, reactive,ref  } from 'vue';
import httpTool from '../../httpRequest';
import FilterComponent from '../../components/Filter.vue';
import ListTable from '../../components/ListTable.vue';
import Pagination from '../../components/Pagination.vue';
import DialogForm from '../../components/DialogForm.vue';
import { ElMessage,ElMessageBox  } from 'element-plus'
let dataMap = reactive({
    tableData:{},
    selections:[],
    totalNum:{},
    pageParams:{},
    addNewVisible:false,
    currentFormData:{},
    filterArr:{},
});
const filterRef = ref(null);
const dataListRef = ref(null);

const getTableData = (data)=>{
    dataMap.tableData = data.tableData
    dataMap.totalNum = data.total
}
const getFilter = (data)=>{
    dataMap.filterArr = data
}
//关闭对话框
const closeAddNewDialog = (status)=>{
    dataMap.addNewVisible = status;
}
//接收分页信息
const getPageParams = (data)=>{
    dataMap.pageParams = data
}
//获取选中的行信息
const getTotalSelections = (selections)=>{
    dataMap.selections = selections
}
//清空选择
const clearSelections = ()=>{
    dataListRef.value.clearSelections()
}
//新增
const handleAddNew = ()=>{
    dataMap.addNewVisible = true;
}
//提交表单
const getAddNewDialogData = (formData)=>{
    httpTool.post('/api/user/AddUser',formData).then(response=>{
        if(response.code == '200'){
            ElMessage({
                message: response.msg,
                type: 'success',
            })
            dataMap.addNewVisible = false;
            filterRef.value.doSearch()
        }
    }).catch(error=>{

    })
}
//禁用
const handleDisable = ()=>{
    if(Object.keys(dataMap.selections).length == 0){
        ElMessage({
            message: '必须至少选择一条记录',
            type: 'warning',
        })
        return false;
    }
    ElMessageBox.confirm(
        '禁用选中的用用户？',
        '提示',
        {
            confirmButtonText:'确认',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(()=>{
        let ids = [];
        for(let i in dataMap.selections){
            ids.push(dataMap.selections[i].id);
        }
        httpTool.post('/api/user/ChangeUserStatus',{ids:ids,status:2}).then(response=>{
            if(response.code == '200'){
                ElMessage({
                    message: response.msg,
                    type: 'success',
                })
                console.log(filterRef);
                filterRef.value.doSearch()
            }
        }).catch(error=>{

        })
    }).catch(()=>{
        ElMessage({
            message: '你取消了操作',
            type: 'info',
        })
    })
}
//启用
const handleEnable = ()=>{
    if(Object.keys(dataMap.selections).length == 0){
        ElMessage({
            message: '必须至少选择一条记录',
            type: 'warning',
        })
        return false;
    }
    ElMessageBox.confirm(
        '启用选中的用用户？',
        '提示',
        {
            confirmButtonText:'确认',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(()=>{
        let ids = [];
        for(let i in dataMap.selections){
            ids.push(dataMap.selections[i].id);
        }
        httpTool.post('/api/user/ChangeUserStatus',{ids:ids,status:1}).then(response=>{
            if(response.code == '200'){
                ElMessage({
                    message: response.msg,
                    type: 'success',
                })
                filterRef.value.doSearch()
            }
        }).catch(error=>{

        })
    }).catch(()=>{
        ElMessage({
            message: '你取消了操作',
            type: 'info',
        })
    })
}
//重置密码
const resetPassword = ()=>{
    if(Object.keys(dataMap.selections).length == 0){
        ElMessage({
            message: '必须至少选择一条记录',
            type: 'warning',
        })
        return false;
    }
    ElMessageBox.confirm(
        '给选中的用户重置密码？',
        '提示',
        {
            confirmButtonText:'确认',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(()=>{
        let ids = [];
        for(let i in dataMap.selections){
            ids.push(dataMap.selections[i].id);
        }
        httpTool.post('/api/user/ResetPassword',{ids:ids}).then(response=>{
            ElMessage({
                message: response.msg,
                type: 'success',
            })
            initData();
        }).catch(error=>{

        })
    }).catch(()=>{
        ElMessage({
            message: '你取消了操作',
            type: 'info',
        })
    })
}

</script>

<style lang="scss" scoped>

</style>